<!-- 简洁登录页面 -->
<template>
	<view class="login-bg">
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎登录<switch checked @change="switch1Change" /></view>
		<view class="t-login">

			<form class="cl">
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
					<input type name="phone" placeholder="请输入账号" maxlength="11" v-model="phone" />
				</view>
				<view class="t-a">
					<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
					<input type="password" name="code" maxlength="16" placeholder="请输入密码" v-model="pwd" />
				</view>
				<button @tap="login()">登 录</button>
				<view class="t-c">
					<text class="t-c-txt" @tap="reg()">注册账号</text>
					<text>返回首页</text>
				</view>
			</form>
			<view class="t-f">
				<span :style="{width:width+'px'}"></span>
				<text class="qt"> 其他登录方式 </text>
				<span :style="{width:width+'px'}"></span>
			</view>
			<view class="t-e cl">
				<view class="t-g" @tap="wxLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/wx2.png"></image>
				</view>
				<view class="t-g" @tap="zfbLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/qq2.png"></image>
				</view>
				<view class="t-g" @tap="zfbLogin()">
					<image src="https://zhoukaiwen.com/img/loginImg/wb.png"></image>
				</view>
			</view>
		</view>
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		http
	} from '@/utils/request.js'
	import {useInfoStore} from '@/store/store.js'

	const title = ref('招聘·登录') //填写logo或者app名称，也可以用：欢迎回来，看您需求
	const phone = ref('') //手机号码
	const pwd = ref('') //密码
	const width = ref('')

	onMounted(() => {
		setTimeout(() => {
			const query = uni.createSelectorQuery();
			query.select('.qt').boundingClientRect();
			query.select('.t-f').boundingClientRect();
			query.exec((res) => {
				console.log('res[0]', res[0]);
				console.log('res[1]', res[1]);
				width.value = ((res[1].width - res[0].width) / 2) - 15;
			});
		}, 200);
	});

	const login = () => {
		if (!phone.value) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			});
			return;
		}
		if (!pwd.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}

		denlu();
	};
	//登录请求
	const denlu = async () => {
		let tuser = ref({
			username: phone.value,
			password: pwd.value,
		});
		if (type.value) {
			tuser.value.type = 2
		} else {
			tuser.value.type = 1
		}
		// console.log(tuser);
		let data = await http({
			url: '/User/login',
			method: 'post',
			data: tuser.value
		});
		/* console.log(data); */
		if (data.flag && data.code == 2000) {
			useInfoStore().settoken=data.shuju;
			uni.showToast({
				title: '登录成功！',
				icon: 'none'
			});
			//登录成功后去哪个页面
			if(data.shuju.type==1){
				uni.switchTab({
				  url: '/pages/index/index'
				});
			}else{
				uni.switchTab({
				  url: '/pages/seeker/seeker'
				});
			}
			
		}else{
			uni.showToast({
				title: data.shuju,
				icon: 'none'
			});
		}
	};
	//跳转去注册
	const reg = () => {
		uni.showToast({
			title: '注册账号',
			icon: 'none'
		});
		uni.redirectTo({
		  url: '/pages/login/register'
		});
	};
	//选择是企业还是面试
	const type=ref(false)
	const switch1Change = (e) => {
		console.log(e)
		type.value=e.detail.value
		if (type.value) {
			title.value = '招聘·登录'
		} else {
			title.value = '企业·登录'
		}
		console.log('switch1 发生 change 事件，携带值为',type.value )
	}
</script>
<style scoped>
	.img-a {
		position: absolute;
		width: 100%;
		top: -150rpx;
		right: 0;
		z-index: -1;
	}

	.img-b {
		position: absolute;
		width: 50%;
		bottom: 0;
		left: -50rpx;
		z-index: -1;
	}

	.login-bg {
		max-width: 750px;
		width: 100vw;
		min-height: 100vh;
	}

	.t-b {
		text-indent: 40rpx;
		font-size: 46rpx;
		color: #000;
		padding: 200rpx 0 30rpx 0;
		font-weight: bold;
	}

	.t-b2 {
		text-indent: 40rpx;
		font-size: 32rpx;
		color: #aaaaaa;
		padding: 0rpx 0 60rpx 0;
	}

	.t-login {
		width: 80%;
		padding: 55rpx;
		margin: 0rpx auto 0 auto;
		font-size: 28rpx;
		z-index: 9;
	}

	.t-login button {
		font-size: 28rpx;
		background: linear-gradient(to right, #5677fc, hsla(217 100% 56% / 1));
		/* background-image: linear-gradient(325deg,
				hsla(217 100% 56% / 1) 0%,
				hsla(194 100% 69% / 1) 55%,
				hsla(217 100% 56% / 1) 90%); */
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.t-login input {
		padding: 0 20rpx 0 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 50rpx;
		background: #f6f6f6;
		border: 1px solid #f6f6f6;
		font-size: 28rpx;
		border-radius: 50rpx;
	}

	.t-login .t-a {
		position: relative;
	}

	.t-login .t-a image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 40rpx;
		top: 28rpx;
	}

	.t-login .t-b {
		text-align: left;
		font-size: 46rpx;
		color: #000;
		padding: 300rpx 0 120rpx 0;
		font-weight: bold;
	}

	.t-login .t-d {
		text-align: center;
		color: #999;
		margin: 80rpx 0;
	}

	.t-login .t-c {
		display: flex;
		justify-content: space-evenly;
		color: #666666;
		margin: 30rpx 30rpx 40rpx 0;
	}

	.t-login .t-c .t-c-txt {
		margin-right: 300rpx;
	}

	.t-login .t-e {
		text-align: center;
		width: 80%;
		margin: 40rpx auto 0;
	}

	.t-login .t-g {
		float: left;
		width: 33.33%;
	}

	.t-login .t-e image {
		width: 70rpx;
		height: 70rpx;
	}

	.t-login .t-f {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 80rpx 0 0 0;
		color: #999;
		position: relative;
	}

	.t-login .t-f text {
		color: #b9b9b9;
		font-size: 27rpx;
	}

	.t-login .t-f span {
		display: block;
		background-color: #000;
		width: auto;
		height: 1.5rpx;
	}

	.t-login .uni-input-placeholder {
		color: #aeaeae;
	}

	.cl {
		zoom: 1;
	}

	.cl:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}
</style>